<template>
  <div class="app-container">
    <div v-permission="['department:all']" class="toolbar-box">
      <el-dropdown style="margin-right:10px;" @command="handlerAdd">
        <el-button
          type="primary"
        >新增<i class="el-icon-arrow-down el-icon--right" />
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="0"><i class="el-icon-place" />添加一级公司</el-dropdown-item>
          <el-dropdown-item command="2">新增下级部门</el-dropdown-item>
          <el-dropdown-item v-if="curNodeType==1" command="1">新增下级公司</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-button
        type="success"
        icon="el-icon-edit"
        @click="handlerEdit"
      >编辑
      </el-button>
      <el-button
        type="info"
        @click="handleChangeParent"
      >修改上级
      </el-button>
      <el-button
        type="warning"
        icon="el-icon-delete"
        @click="handleChangeStatus"
      >停用/启用
      </el-button>
      <el-button
        type="danger"
        icon="el-icon-delete"
        @click="handleDelete"
      >删除
      </el-button>

      <el-dropdown style="margin-left:10px;">
        <el-button type="info">
          导入<i class="el-icon-arrow-down el-icon--right" />
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-loading="downloadLoading" @click.native="downloadTpl()">下载导入模板</el-dropdown-item>
          <el-dropdown-item @click.native="impExcel()">导入组织架构</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

    </div>
    <div class="d-tree-panel">
      <el-tree
        ref="dptTree"
        :data="treeData"
        node-key="id"
        highlight-current
        :props="defaultProps"
        default-expand-all
        :expand-on-click-node="false"
        :render-content="renderContent"
        @node-click="deptNoteClick"
      />
    </div>
    <!--表单组件-->
    <eForm ref="eform" />
    <pForm ref="pform" />
    <uploadForm ref="uploadForm" />
  </div>
</template>
<script>

import pForm from './parentForm'
import { downloadFile } from '@/utils'
import eForm from './form'
import request from '@/utils/request'
import uploadForm from '../impresult/uploadForm'
import { resetCache } from '@/api/basedata'
export default {
  name: 'Department',
  components: { eForm, pForm, uploadForm },
  data() {
    return {
      curNodeType: '',
      downloadLoading: false,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    renderContent(h, { node, data, store }) {
      if (node.data.type === 1) {
        if (node.data.disabled) {
          return (
            <span class='el-tree-node__label d-disabled-true'>
              <i class='el-icon-s-grid' style='color:blue;'></i> {node.data.code} - {node.label}
            </span>
          )
        } else {
          return (
            <span class='el-tree-node__label'>
              <i class='el-icon-s-grid' style='color:blue;'></i> {node.data.code} - {node.label}
            </span>
          )
        }
      } else {
        if (node.data.disabled) {
          return (
            <span class='el-tree-node__label d-disabled-true'>
              <i class='el-icon-tickets' style='color:orange;'></i> {node.data.code} - {node.label}
            </span>
          )
        } else {
          return (
            <span class='el-tree-node__label'>
              <i class='el-icon-tickets' style='color:orange;'></i> {node.data.code} - {node.label}
            </span>
          )
        }
      }
    },
    getList() {
      request({ url: '/sys/department/getAllTree', method: 'get' }).then(data => {
        this.treeData = data
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    handlerEdit() {
      const node = this.$refs.dptTree.getCurrentNode()
      if (!node) {
        this.$message('请选择一个部门/公司。')
        return
      }
      this.$refs.eform.edit(node.id)
    },
    handlerAdd(command) {
      const c = parseInt(command)
      if (c === 0) {
        this.$refs.eform.addTop()
        return
      }
      const node = this.$refs.dptTree.getCurrentNode()
      if (!node) {
        this.$message('请选择一个（上级）部门/公司。')
        return
      }
      this.$refs.eform.add(node, c)
    },
    handleDelete() {
      const node = this.$refs.dptTree.getCurrentNode()
      if (!node) {
        this.$message('请选择一个部门/公司。')
        return
      }
      this.$confirm('此操作将永久删除所选部门/公司：' + node.label + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({ url: '/sys/department/delete', method: 'post', params: { 'id': node.id }}).then(res => {
          this.$notify({
            title: '删除成功',
            type: 'success',
            duration: 2500
          })
          this.$refs.dptTree.remove(node)
          // --
          resetCache('department')
        }).catch(err => {
          this.$message.error(err.message)
        })
      })
    },
    deptNoteClick(data) {
      this.curNodeType = data.type
    },
    handleChangeParent() {
      const node = this.$refs.dptTree.getCurrentNode()
      if (!node) {
        this.$message('请选择一个部门/公司。')
        return
      }
      // if (node.parentId === 0) {
      //  return
      // }
      this.$refs.pform.initDeptOptions(this.treeData)
      this.$refs.pform.edit(node)
    },
    handleChangeStatus() {
      const node = this.$refs.dptTree.getCurrentNode()
      if (!node) {
        this.$message('请选择一个部门/公司。')
        return
      }
      this.$confirm('此操作将停用/启用所选部门/公司：' + node.label + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({ url: '/sys/department/changeStatus', method: 'post', params: { 'id': node.id }}).then(res => {
          this.$notify({
            title: '停用/启用成功',
            type: 'success',
            duration: 2500
          })
          this.getList()
          // --
          resetCache('department')
        }).catch(err => {
          this.$message.error('停用/启用错误。' + err.message)
        })
      })
    },
    downloadTpl() {
      this.loading = true
      request({ url: '/sys/department/exportTpl', method: 'get', responseType: 'blob' })
        .then(data => {
          downloadFile(data, '组织架构导入模板', 'xlsx')
          this.loading = false
        })
        .catch(e => {
          this.loading = false
          this.$message.error('下载导入模板出错')
        })
    },
    impExcel() {
      this.$refs.uploadForm.show('/sys/department/importExcel')
    }
  }
}
</script>

<style lang="scss">
  .tree-panel {
    margin-top:24px;
  }
</style>
